<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%--代表HTML5--%>
<!DOCTYPE html>
<html>
<%--Header Begin--%>
<head>
    <link href="//unpkg.com/layui@2.9.7/dist/css/layui.css" rel="stylesheet">
    <title>View | 景点</title>
    <jsp:include page="../../../includes/header.jsp"/>
    <style>
        .viewPointFilterDiv {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
        }

        .viewPointFilterDiv > ol > li {
            padding-left: 10px;
            color: skyblue;
            font-size: 15px;
        }
    </style>
</head>

<body class="skin-blue layout-top-nav" style="height: auto; min-height: 100%;">

<div class="wrapper" style="height: auto; min-height: 100%;">

    <jsp:include page="../../../includes/top_navigation_reception.jsp"/>


    <!-- Full Width Column -->
    <div class="content-wrapper" style="min-height: 471px;">
        <div class="container">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <br>
                <h1>
                    旅游景点 | View
                    <small>最新发布</small>
                </h1>
                <ol class="breadcrumb">
                    <br>
                    <li><a href="/view/point"><i class="fa fa-dashboard"></i>旅游景点</a></li>
                    <li><a href="#">SHOW</a></li>
                    <div class="box-tools">
                        <form action="/view/viewPointSearch" method="get">
                            <div class="input-group input-group-sm" style="width: 150px;">
                                <input type="text" name="keyword" class="form-control pull-right"
                                       placeholder="景点搜索...">

                                <div class="input-group-btn">
                                    <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </ol>
            </section>
            <br><br>
            <hr>
            <section>
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-primary demo-dropdown-base">
                        <span id="ByName">人气</span>
                        <i class="layui-icon layui-icon-down layui-font-12"></i>
                    </button>
                </div>
                <%--                <div class="viewPointFilterDiv">--%>
                <%--                    <ol style="list-style-type: none;display: flex;">--%>
                <%--                        <li>价格优先</li>--%>
                <%--                        <li>好评优先</li>--%>
                <%--                        <li>星级优先</li>--%>
                <%--                    </ol>--%>
                <%--                </div>--%>
                <div class="row">
                    <c:forEach items="${viewPoints}" var="viewPoint">
                        <%--自定义内容--%>
                        <div class="col-sm-6 col-md-4 col-lg-3 viewpages">
                            <div class="thumbnail" style="height: auto;">
                                <div class="layui-card">
                                    <div class="layui-card-body">

                                        <a href="${pageContext.request.contextPath}/view/content?tpVid=${viewPoint.tpVid}">
                                            <img style="width: 300px; height: 200px;" src="${viewPoint.tpVpic}"
                                                 alt="..."
                                                 class="img-rounded">
                                        </a>
                                        <div class="caption">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <h4 style="padding-top: 10px">${fn:substring(viewPoint.tpTitle,0,30)}</h4>
                                                        <h5 style="padding-top: 10px">
                                                            [${viewPoint.tpVname}&nbsp;<small>| ${viewPoint.tpLocation}</small>
                                                            ]
                                                        </h5>
                                                        <h5 style="padding-top: 10px">等级✨: ${viewPoint.tpLevel}</h5>
                                                        <h5 style="padding-top: 10px">
                                                            开放时间⏱️: ${viewPoint.tpOpentime}</h5>
                                                        <h5 style="padding-top: 10px">类型🌈: ${viewPoint.tpVtype}</h5>
                                                        <h5 style="padding-top: 10px">
                                                            详细地址🏡:${fn:substring(viewPoint.tpZip,0,7)}${viewPoint.tpZip.length()>7?"..":''}</h5>
                                                        <h5 style="padding-top: 10px">电话📞: ${viewPoint.tpVphone}</h5>
                                                        <div class="form-group"
                                                             style="text-align: right;padding-top: 10px">
                                                            <a class="btn" style="color: #0b97c4"
                                                               href="${pageContext.request.contextPath}/view/content?tpVid=${viewPoint.tpVid}">查看更多
                                                                »</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </c:forEach>
                </div>
            </section>
            <br>
            <!-- /.container -->
        </div>
        <!-- /.content-wrapper -->
    </div>
    <%--版权--%>
    <jsp:include page="../../../includes/copyright.jsp"/>
    <!-- ./wrapper -->
    <%--js--%>
    <jsp:include page="../../../includes/footer.jsp"/>
    <script src="//unpkg.com/layui@2.9.7/dist/layui.js"></script>
    <script>
        layui.use(function () {
            var dropdown = layui.dropdown;
            // 渲染
            dropdown.render({
                elem: '.demo-dropdown-base', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
                data: [{
                    title: '人气',
                    data: "heat"
                }, {
                    title: '评论数',
                    data: "comment"
                }],
                click: function (obj) {
                    // 获取跳转链接
                    // 执行页面跳转
                    window.location.href = "${pageContext.request.contextPath}/view/point?orderBy=" + obj.data + "&ByName=" + obj.title;
                }
            });
            var laypage = layui.laypage;

            // 获取地址栏中特定参数的值
            function getPageParameter(parameterName) {
                var searchParams = new URLSearchParams(window.location.search);
                return searchParams.get(parameterName);
            }

            // 普通用法
            laypage.render({
                elem: 'demo-laypage-normal-1',
                curr: getPageParameter('page') || 1, // 设置默认起始页1
                count: 50, // 数据总数
                jump: function (obj, first) {
                    <%--    alert(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。--%>
                    <%--    alert(obj.limit); // 得到每页显示的条数--%>

                    // 首次不执行
                    if (!first) {
                        // do something
                        // 拼接新的 URL，包含页码参数
                        var url = window.location.pathname + '?page=' + obj.curr;
                        // 页面跳转
                        window.location.href = url;
                    }
                }
            });
        });


    </script>
    <script>
        // 获取 URL 参数的函数
        function getUrlParam(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        // 获取名为 category 的参数值
        var categoryValue = getUrlParam('ByName');
        if (categoryValue != null) {
            // 将参数值设置为 span 元素的文本内容
            document.getElementById('ByName').innerText = categoryValue;
        }

    </script>
</body>
</html>